<template>
  <el-form-item :prop="prop" :label="label" :rules="rulesList">
    <template v-if="!number">
      <el-input
        v-model="text"
        auto-complete="off"
        :placeholder="placeholder||placeholderText"
        :disabled="disabled"
        :readonly="readonly"
        :clearable="clearable"
        :maxlength="maxlength"
        :show-password="showPassword"
        v-bind="$attrs"
        @change="change"
        @blur="blur"
      />
    </template>
    <template v-if="number">
      <el-input v-model="text" type="number" :placeholder="placeholder||placeholderText" :disabled="disabled" :readonly="readonly" :show-password="showPassword" v-bind="$attrs" @change="change" @mousewheel.native.prevent  />
    </template>
  </el-form-item>
</template>

<script>
import checkCard from '@/utils/external/identity'
import { Reg_Phone, Reg_Int, Reg_OneDecimal, Reg_TwoDecimal, Reg_Email,Reg_wherecredit } from '@/utils/external/regexp'
import { mixin } from './mixin'
export default {
  name: 'Input',
  mixins: [mixin],
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: null,
    disabled: Boolean,
    readonly: Boolean,
    number: Boolean,
    showPassword: Boolean,
    clearable: {
      type: Boolean,
      default: true
    },
    maxlength: {
      type: Number,
      default: 20
    },

    mobile: Boolean, // 手机验证
    email: Boolean, // 邮箱认证
    int: Boolean, // 正整数验证
    creditCode:Boolean, //社会统一信用代码验证
    oneDecimal: Boolean,
    twoDecimal: Boolean,
    checkCard: Boolean// 身份证验证
  },
  data() {
    return {
      text: this.value,
      placeholderText: '请输入内容'
    }
  },
  watch: {
    text(val) {
      if (this.number) {
        this.$emit('change', Number(val))
      } else {
        this.$emit('change', val)
      }
    },
    value(val) {
      this.text = val
    }
  },
  methods: {
    setRules() {
      this.rulesList = [].concat(this.rules)
      if (this.required) {
        this.rulesList.push({ required: true, message: ' ', trigger: 'change' })
      }
      if (this.creditCode) {
        this.rulesList.push(
          {
            pattern: Reg_wherecredit,
            message: '请填写正确社会统一信用代码',
            trigger: 'blur'
          }
        )
      }
      if (this.email) {
        this.rulesList.push(
          {
            pattern: Reg_Email,
            message: '请填写正确邮箱地址',
            trigger: 'blur'
          }
        )
      }
      if (this.int) {
        this.rulesList.push(
          {
            pattern: Reg_Int,
            message: '只允许填写正数',
            trigger: 'change'
          }
        )
      }
      if (this.oneDecimal) {
        this.rulesList.push(
          {
            pattern: Reg_OneDecimal,
            message: '只允许正数或一位小数',
            trigger: 'change'
          }
        )
      }
      if (this.twoDecimal) {
        this.rulesList.push(
          {
            pattern: Reg_TwoDecimal,
            message: '最多输入到小数点后两位',
            trigger: 'change'
          }
        )
      }
      if (this.mobile) {
        this.rulesList.push({ validator: (rule, value, callback) => {
          if (!value) {
            callback()
          } else if (!Reg_Phone(value)) {
            callback(new Error('请填写正确手机号'))
          } else {
            callback()
          }
        }, trigger: 'blur' })
      }
      if (this.checkCard) {
        this.rulesList.push({ validator: (rule, value, callback) => {
          if (!value) {
            callback()
          } else if (!checkCard.checkCard(value)) {
            callback(new Error('身份证号码输入有误'))
          } else {
            callback()
          }
        }, trigger: 'blur' })
      }
    },
    change(value) {
      this.$emit('change', value)
    },
    blur(value) {
      this.$emit('blur',this.text)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-input {
  max-width: 220px;
}
</style>
